<template>

  <div>


    <view-box ref="viewBox">
      <group label-width="2.8rem" label-margin-right=".5em" class="content lng-14-text">
        <popup-picker title="请选择站点名称：" class="lng-14-text" :data="list" v-model="value5"
                      value-text-align="left"></popup-picker>
        <cell title="站点地址：" :value="value" value-align="left"></cell>
        <x-input title="设备名称：" placeholder=""></x-input>
        <popup-picker title="设备所在区域：" :data="list" v-model="value5" value-text-align="left"></popup-picker>
        <popup-picker title="设备类型：" :data="list" v-model="value5" value-text-align="left"></popup-picker>
        <popup-picker title="加急程度：" :data="list" v-model="value5" value-text-align="left"></popup-picker>
        <x-textarea title="故障说明：" v-model="value"></x-textarea>
        <cell title="照片上传：" value-align="left" align-items="end">
          <div>
            <img src="../../assets/img/add.png" alt="">
          </div>
        </cell>
        <datetime title="维修截止时间:" placeholder="" value-text-align="left"></datetime>

        <template v-if="scopeType == 1">
          <popup-picker title="选择维修公司：" :data="list" v-model="value5" value-text-align="left"></popup-picker>
          <x-input title="维修预估金额：" placeholder=""></x-input>
          <x-input title="任务联系人：" placeholder=""></x-input>
          <x-input title="联系电话：" placeholder=""></x-input>
        </template>


      </group>

      <div class="btn">
        <x-button type="primary" loading>确认</x-button>
      </div>
    </view-box>


    <div v-transfer-dom  class="check-scope">
      <alert v-model="show"  @on-show="onShow" @on-hide="onHide">
        <checklist :max="1" :options="scopeList" v-model="scopeValue"></checklist>
      </alert>
    </div>

    <tab-bar selected="3"></tab-bar>

  </div>


</template>

<script>
  import {
    Tab, TabItem,
    ViewBox, CellBox,
    Datetime,
    Flexbox,
    Group,
    Picker,
    XInput,
    FlexboxItem,
    PopupPicker,
    Popup,
    Cell,
    Alert,
    TransferDom,
    Checklist,
    XTextarea,
    XButton,
    XDialog
  } from 'vux'
  import tabBar from '@/components/equipment/public/tab-bar'


  export default {
    directives: {
      TransferDom
    },
    components: {
      tabBar,

      Tab, TabItem,
      XDialog, CellBox,
      ViewBox,
      XButton,
      Cell,
      Group,
      Datetime,
      Alert,
      Checklist,
      XTextarea,
      XInput,
      Popup,
      PopupPicker,
      Flexbox,
      Picker,
      FlexboxItem,
    },
    mounted() {

    },
    data () {
      return {
          show:true,
        showDetailDialog: false,
        value: "",
        showSearchBox: true,
        value5: [],
        station: [],
        scopeList: ['内部维修','第三方维修' ],
        list: [[
          {
            key: '内部维修',
            value: '1',
          },
          {
            key: '第三方维修',
            value: '2',
          },
        ]],
        scopeValue:['内部维修'],
        scopeType:0, //0 内部维修  1 第三方维修
        showPopup: false,
        years: []
      }
    },
    watch: {
      years(val){
        console.log(val)
      }
    },
    methods: {
      onItemClick(index){
        console.log(index);
      },
      getDetail(){
        this.showDetailDialog = true;
      },
      change(){
        this.$router.push({
          name: 'equipmentChange',
          query: {id: 11}
        })
      },
      toggleSearchBox(){
        this.showSearchBox = !this.showSearchBox;
      },
      search(){
        this.showSearchBox = false;
      },
      goPath(name){
        this.$router.push({
          name: name
        });
      },
      onChange (val) {
        console.log('val change', val)
      },
      onShow () {
        console.log('on show')
      },
      onHide () {
        console.log(this.scopeValue);
        if (this.scopeValue[0] == '内部维修'){
            this.scopeType = 0
        }else {
          this.scopeType = 1
        }
        console.log(this.scopeType);

      }
    }
  }
</script>

<style scoped>
  .content {
    margin: 0 0 10px;
  }

  .btn {
    margin: 0 10px 1.8rem;
  }


</style>
<style>
  .check-scope .weui-dialog__hd{
    padding: 0;
  }
  .check-scope .weui-dialog__bd{
    padding: 0;
  }

</style>
